<script setup lang="ts">
import dayjs from 'dayjs'
import { ApiMyData } from '~/apis'
import AppDatePicker from '~/components/AppDatePicker.vue'
import AppSelect from '~/components/AppSelect.vue'
import BaseImage from '~/components/BaseImage.vue'
import commissionLogoIcon from '/images/webp/affiliate-program/commission_logo_icon.webp'
import myCommissionIcon from '/images/webp/affiliate-program/my-commission-icon.webp'
// 使用国际化函数
const { t } = useI18n()
const { isLogin } = storeToRefs(useAppStore())
const { mode, bonus_currency } = storeToRefs(useAffiliate())
const dateRange = ref('2024-12-18 到 2024-12-25')
const dateSelect = ref()
const date = ref<string[]>(calculateDateRange('今天'))


interface DateOptionItem {
  label: string
  value: string[]
}

interface SelectOptionItem {
  label: string
  value: string
}

// 时间周期选项
const periodOptions = ref<DateOptionItem[]>([
  { label: t('affiliate_program_today'), value: calculateDateRange('今天') },
  { label: t('affiliate_program_yesterday'), value: calculateDateRange('昨天') },
  { label: t('affiliate_program_this_week'), value: calculateDateRange('本周') },
  { label: t('affiliate_program_last_week'), value: calculateDateRange('上周') },
  { label: t('affiliate_program_this_month'), value: calculateDateRange('本月') },
  { label: t('affiliate_program_last_month'), value: calculateDateRange('上月') },
])


const { data: proData, loading: loadMyData, runAsync: runAsyncGetMyPro } = useRequest(ApiMyData, {
  ready: isLogin,
})

const today = computed(() => mode.value == 1
  ? [
    [
      {
        label: t('affiliate_program_total_bet'),
        value: `${proData.value?.valid_bet_amount_total || '0.00'}`,
        price: true,
      },
    ],
    [
      {
        label: t('affiliate_program_total_registration'),
        value: (proData.value?.reg_cnt_total || '0') + t('affiliate_program_people'),
      },
    ],
    [
      {
        label: t('affiliate_program_first_deposit_total'),
        value: proData.value?.first_deposit_amt_total || '0.00',
        after: `/ ${proData.value?.first_cnt_total || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
    ],
    [
      {
        label: t('affiliate_program_deposit_total'),
        value: proData.value?.deposit_amt_total || '0.00',
        after: `/ ${proData.value?.deposit_cnt_total || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
    ],
  ]
  : [
    [
      {
        label: t('affiliate_program_total_bet'),
        value: `${proData.value?.valid_bet_amount_total || '0.00'}`,
        after: `/ ${proData.value?.valid_bet_cnt_total || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
      {
        label: t('affiliate_program_direct_bet'),
        value: `${proData.value?.valid_bet_cnt_direct || '0.00'}`,
        after: `/ ${proData.value?.valid_bet_cnt_direct || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
      {
        label: t('affiliate_program_team_bet'),
        value: `${proData.value?.valid_bet_cnt_other || '0.00'}`,
        after: `/ ${proData.value?.valid_bet_cnt_other || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
    ],
    [
      {
        label: t('affiliate_program_total_registration'),
        after: (proData.value?.reg_cnt_total || '0') + t('affiliate_program_people'),
      },
      {
        label: t('affiliate_program_direct_registration'),
        after: (proData.value?.reg_cnt_direct || '0') + t('affiliate_program_people'),
      },
      {
        label: t('affiliate_program_team_registration'),
        after: (proData.value?.reg_cnt_other || '0') + t('affiliate_program_people'),
      },
    ],
    [
      {
        label: t('affiliate_program_first_deposit_total'),
        value: (proData.value?.first_deposit_amt_total || '0.00'),
        after: `/ ${proData.value?.first_cnt_total || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
      {
        label: t('affiliate_program_first_deposit_direct'),
        value: (proData.value?.first_deposit_amt_direct || '0.00'),
        after: `/ ${proData.value?.first_cnt_direct || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
      {
        label: t('affiliate_program_first_deposit_team'),
        value: (proData.value?.first_deposit_amt_other || '0.00'),
        after: `/ ${proData.value?.first_cnt_other || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
    ],
    [
      {
        label: t('affiliate_program_deposit_total'),
        value: proData.value?.deposit_amt_total || '0.00',
        after: `/ ${proData.value?.deposit_cnt_total || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
      {
        label: t('affiliate_program_deposit_direct'),
        value: proData.value?.deposit_amt_direct || '0.00',
        after: `/ ${proData.value?.deposit_cnt_direct || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
      {
        label: t('affiliate_program_deposit_team'),
        value: proData.value?.deposit_amt_other || '0.00',
        after: `/ ${proData.value?.deposit_cnt_other || 0} ${t('affiliate_program_people')}`,
        price: true,
      },
    ],

  ])

function calculateDateRange(type: string) {
  const now = dayjs();
  let start, end;

  switch (type) {
    case '今天':
      start = now.startOf('day');
      end = now.endOf('day');
      break;

    case '昨天':
      start = now.subtract(1, 'day').startOf('day');
      end = now.subtract(1, 'day').endOf('day');
      break;

    case '本周':
      // ISO周：周一作为一周的开始
      start = now.startOf('week');
      end = now.endOf('week');
      break;

    case '上周':
      start = now.subtract(1, 'week').startOf('week');
      end = now.subtract(1, 'week').endOf('week');
      break;

    case '本月':
      start = now.startOf('month');
      end = now.endOf('month');
      break;

    case '上月':
      start = now.subtract(1, 'month').startOf('month');
      end = now.subtract(1, 'month').endOf('month');
      break;

    default:
      throw new Error('无效的类型: 请使用今天、昨天、本周、上周、本月、上月');
  }

  // 统一格式化为 yyyy-MM-dd HH:mm:ss
  return [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
}

watch(date, async () => {
  if (isLogin.value) {
    await application.allSettled(
      [runAsyncGetMyPro({
        start_time: date.value[0],
        end_time: date.value[1],
      })],
    )
  }
}, {
  deep: true,
})


onMounted(() => {
  dateSelect.value && dateSelect.value.selectOption(periodOptions.value[0])
  console.log(date, 'datedate')
})

definePageMeta({
  layout: 'header-back',
  title: 'affiliate_program_my_data'
});
</script>

<template>
  <div class="my-data-container" :key="bonus_currency">
    <!-- 日期选择部分 -->
    <div class="date-filter">
      <AppSelect ref="dateSelect" v-model="date" :options="periodOptions" />

      <AppDatePicker v-model="date" v-model:date-range-value="dateRange" />
    </div>

    <!-- 佣金数据部分 -->
    <div class="commission-section">
      <div class="section-title">
        <span class="icon">
          <BaseImage width="18px" :url="myCommissionIcon" />
        </span>
        <span>{{ t('affiliate_program_my_commission') }}</span>
      </div>

      <div class="commission-cards">
        <div class="commission-card">
          <div class="card-icon">
            <BaseImage width="16px" :url="commissionLogoIcon" />
            <span>{{ t('affiliate_program_direct_commission') }}</span>
          </div>
          <div class="amount">
            <span class="value">{{ proData?.commission_amount_direct }}</span>
            <BaseCurrencyIcon style="width:14px" :cur="getCurrencyConfigByCode(bonus_currency || '')?.name || ''" />
          </div>
        </div>

        <div class="commission-card">
          <div class="card-icon">
            <BaseImage width="16px" :url="commissionLogoIcon" />
            <span>{{ t('affiliate_program_team_commission') }}</span>
          </div>
          <div class="amount">
            <span class="value">{{ proData?.commission_amount_other }}</span>
            <BaseCurrencyIcon style="width:14px" :cur="getCurrencyConfigByCode(bonus_currency || '')?.name || ''" />
          </div>
        </div>
      </div>

      <div class="total-commission">
        <div class="card-icon">
          <BaseImage width="16px" :url="commissionLogoIcon" />
          <span>{{ t('affiliate_program_total_commission') }}</span>
        </div>
        <div class="amount">
          <span class="value" style=" font-size:18px">{{ proData?.commission_amount_total }}</span>
          <BaseCurrencyIcon :cur="getCurrencyConfigByCode(bonus_currency || '')?.name || ''"
            style="width: 18px; height: 18px" />
        </div>
      </div>
    </div>

    <!-- 投注数据部分 -->
    <div class="data-section" v-for="(item, index) in today" :key="index">
      <div class="data-row" v-for="(citem, cindex) in item" :key="cindex">
        <span class="label">{{ citem.label }}</span>
        <BaseSkeleton v-if="loadMyData" height="14px" animated="ani-opacity" />
        <div v-else class="value-with-icon">
          <template v-if="'price' in citem && citem.price">
            <BaseCurrencyIcon :cur="getCurrencyConfigByCode(bonus_currency || '')?.name || ''" />
          </template>
          <span v-if="'value' in citem" class="value">
            {{ citem.value }}
          </span>
          <span v-if="'after' in citem" class="unit">{{ citem.after }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-data-container {
  background-color: #1a1d1e;
  color: white;
  min-height: 100vh;
  padding: 0;
  overflow-y: scroll;
  position: relative;
}

.date-filter {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  gap: 12px;
  position: relative;

  .date-select,
  .date-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #232626;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;

    .icon-arrow-down {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-left: 5px;
    }
  }

  .date-select {
    width: 100px;
    flex: 0 0 auto;
  }

  .date-range {
    flex: 1;
  }
}

// 弹出动画
.popup-enter-active,
.popup-leave-active {
  transition: all 0.3s ease;
}

.popup-enter-from,
.popup-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

// 弹出选择器容器
.select-popup-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

// 弹出选择器样式
.select-popup {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 101;

  &.animated {
    animation: slideUp 0.3s ease-out forwards;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  .popup-content {
    background-color: #232626;
    border-radius: 12px 12px 0 0;
    position: relative;

    .close-area {
      display: flex;
      justify-content: end;
      padding: 16px;
      position: relative;

      .popup-handle {
        width: 36px;
        height: 4px;
        background-color: #5d6163;
        border-radius: 2px;
      }

      .close-btn {
        width: 28px;
        height: 28px;
        background: #4a5354;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        margin-bottom: 10px;

        .close-icon {
          font-size: 14px;
          flex-wrap: 700;
          color: #fff;
        }
      }
    }
  }

  .popup-inner {
    max-height: 40vh;
    overflow-y: scroll;
    padding: 0 0 20px;
  }

  .select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 16px;
    position: relative;

    &.active {
      color: white;
      font-weight: 500;
      background-color: #323738;
    }

    .circle-container {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px solid #e4eaf030;
        border-radius: 50%;
      }
    }

    .select-indicator {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #24ee89;
      position: absolute;

      &::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: #323738;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }
    }
  }
}

.commission-section {
  margin: 0 16px;
  padding: 16px;
  background-color: #323738;
  border-radius: 8px;
  margin-bottom: 16px;

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;

    .icon {
      margin-right: 8px;
    }
  }

  .commission-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;

    .commission-card {
      flex: 1;
      background-color: #3a4142;
      border-radius: 8px;
      padding: 8px;
    }
  }

  .total-commission {
    background-color: #3a4142;
    border-radius: 8px;
    padding: 8px;
  }

  .card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;


    span {
      margin-left: 5px;
      font-size: 10px;
      color: #fff;
      font-weight: 600;
    }
  }

  .amount {
    display: flex;
    align-items: center;
    justify-content: center;

    .value {
      font-size: 12px;
      font-weight: 700;
      color: #24ee89;
      margin-right: 5px;
    }
  }
}

.data-section {
  margin: 0 16px;
  padding: 16px;
  background-color: #292d2e;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid var(---border-black-23A4142, #3A4142);

  .data-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;

    .label {
      color: #b3bec1;
      font-size: 10px;
    }

    .value {
      color: white;
      font-weight: 500;
      font-size: 12px;
    }

    .value-with-icon {
      display: flex;
      align-items: center;

      .value {
        color: #24ee89;
        margin: 0 5px;
        font-weight: 600;
      }

      .unit {
        color: white;
        font-size: 12px;
        font-weight: 600;
      }
    }
  }
}

// 日历选择器样式
.calendar-popup {
  .popup-content {
    background-color: #232626;
    padding-bottom: 20px;
    border-radius: 12px 12px 0 0;
  }

  .calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    position: relative;
    margin-bottom: 20px;

    .close-btn {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      background: #4a5354;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;

      .close-icon {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
      }
    }

    .calendar-title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }
  }

  .selection-status {
    padding: 0 16px 16px;
    text-align: center;

    .status-label {
      font-size: 14px;
      color: #b3bec1;
      margin-bottom: 8px;
    }

    .selected-range {
      font-size: 14px;
      color: #24ee89;
      background-color: #292d2e;
      padding: 8px 12px;
      border-radius: 6px;
      display: inline-block;
    }
  }

  .calendar-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 16px;

    .nav-button {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .nav-icon {
        color: #fff;
        font-weight: 700;
      }
    }

    .current-month {
      font-size: 12px;
      color: #fff;
    }
  }

  .calendar-content {
    padding: 0 16px;

    .weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
      margin-bottom: 10px;

      .weekday {
        color: #b3bec1;
        font-size: 14px;
        padding: 8px 0;
      }
    }

    .days-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;

      .day-cell {
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6.98px;
        font-size: 14px;
        cursor: pointer;
        margin: 0 auto;

        &.current-month {
          color: #fff;
        }

        &.other-month {
          color: #5d6163;
        }

        &.selected {
          background-color: #24ee89;
          color: #1e2121;
          border-radius: 6.98px;
          font-weight: 500;
        }

        &.in-range {
          background-color: #24ee8933;
          color: #ffffff;
          border-radius: 0;
          border-radius: 6.98px;
        }

        // 第一个选中的日期（左边）
        &.selected:first-of-type:not(:last-of-type),
        &.selected:first-child {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }

        // 最后一个选中的日期（右边）
        &.selected:last-of-type:not(:first-of-type),
        &.selected:last-child {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }
}

.arrow-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a4142;
  border-radius: 4px;
}
</style>
